<template>
  <div class="two">
    <sellDog
      v-for="(item, index) in dog"
      :key="index"
      :dogImg="item.dogImgUrl"
      :dogName="item.dogName"
      @dogHs="doghs"
    ></sellDog>
    <span
      >选择你最喜欢的🐕:
      <ul>
        <li v-for="(item, index) in dogs" :key="index">{{ item }}</li>
      </ul>
    </span>
  </div>
</template>

<script>
import sellDog from './components/3likeDog.vue'
export default {
  methods: {
    doghs(name) {
      console.log(name)
      this.dogs.push(name)
      console.log(this.dogs)
    },
  },
  data() {
    return {
      dogs: [],
      dog: [
        {
          dogImgUrl:
            'http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg',
          dogName: '博美',
        },
        {
          dogImgUrl:
            'http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg',
          dogName: '泰迪',
        },
        {
          dogImgUrl:
            'http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg',
          dogName: '金毛',
        },
        {
          dogImgUrl:
            'http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg',
          dogName: '哈士奇',
        },
        {
          dogImgUrl:
            'http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg',
          dogName: '哈斯',
        },
        {
          dogImgUrl:
            'http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg',
          dogName: '萨摩耶',
        },
      ],
    }
  },
  components: {
    sellDog,
  },
}
</script>

<style>
.two {
  display: flex;
  flex-wrap: wrap;
}
</style>
